<template>
    <div class="edit-web-page">
        <el-dialog v-model="dialogVisible" :title="$t('messgae.btnTxt')" align-center center width="800" class="mobile-dialog">
            <el-form :model="dataForm" label-width="auto" v-loading="loading" ref="ruleFormRef" :rules="rules">
                <el-form-item :label="$t('messgae.label_1')" size="large" prop="title">
                    <el-input v-model="dataForm.title" :placeholder="$t('messgae.placeholder_1')" />
                </el-form-item>
                <el-form-item :label="$t('messgae.label_2')" size="large" prop="content">
                    <el-input type="textarea" v-model="dataForm.content" :rows="5" :placeholder="$t('messgae.placeholder_2')" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button color="#F06423" @click="submitForm(ruleFormRef)" :loading="loading">{{ $t('golbal.btn_text_4') }}</el-button>
                <el-button @click="closeAction(ruleFormRef)" color="#435764">{{ $t('golbal.btn_text_5') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
import type { FormInstance, FormRules } from 'element-plus'
import CourseService from '@/api/course'
// 父组件传进来的参数
const props = defineProps<{
    courseId?: Number
    receiverId?: Number
}>()
const emit = defineEmits(['relRefresh'])
const loading = ref(false)
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const dataForm = reactive({
    title: '',
    content: '',
})
// 自定义验证规则
const rules = reactive({
    title: [{ required: true, message: t('messgae.placeholder_1'), trigger: 'blur' }],
    content: [{ required: true, message: t('messgae.placeholder_2'), trigger: 'blur' }],
})

// 初始化弹窗数据
const initDialog = () => {
    dataForm.title = ''
    dataForm.content = ''
    dialogVisible.value = true
}
defineExpose({
  initDialog
})

// 表单提交
const submitForm = async (formEl: { validate: (arg0: (valid: any, fields: any) => void) => any }) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const params = {
                course_id: props.courseId,
                receiver_id: props.receiverId,
                ...dataForm
            }
            console.log('submit success!', params)
            loading.value = true
            CourseService.postMessage(params)
                .then(res => {
                    if (ruleFormRef.value) {
                        closeAction(ruleFormRef.value)
                        emit('relRefresh')
                    }
                })
                .finally(() => {
                    loading.value = false
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭弹窗
const closeAction = (formEl: { resetFields: () => void }) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = false
}

onMounted(() => {})
</script>

<style scoped lang="less"></style>
